<script lang='ts' setup>
import TollBar from './fat-form-create-editor-toolbar.vue'
import TypePanel from './fat-form-create-editor-type-panel.vue'
import DragPanel from './fat-form-create-editor-target-panel.vue'
import EditPanel from './fat-form-create-editor-item-panel.vue'
import FormSetting from './fat-form-editor-setting.vue'
import Preview from './fat-form-create-preview.vue'
import { provide } from 'vue'
import { IFatForm, IFormItem } from '../type'

const props = defineProps<{
  data: IFatForm;
}>()
const emit = defineEmits<{
  (event: "update:data", data: IFatForm): void
}>()
const state = reactive({
  isEditItem: false,
  bShowFormSetting: false,
  bShowPreview: false
})
function showFormSetting() {
  state.bShowFormSetting = true
}
function showPreview() {
  state.bShowPreview = true
}
const data = computed({
  get() {
    return props.data ?? {
      formConfig: {
        name: 'editForm',
        labelPosition: 'left',
        labelWidth: 88,
        width: 80,
        widthUnit: 'vw'
      },
      formItems: []
    }
  },
  set(val) {
    emit("update:data", val)
  }
})
provide('formConfig', data.value.formConfig)

const edit = reactive({
  show: false,
  item: <IFormItem>{},
  run(item: IFormItem) {
    edit.show = true
    edit.item = item
  },
})
provide('editItem', edit.run)
</script>

<template>
  <div class="fat-form-layout-container">
    <div class="toolbar">
      <TollBar v-model:data="data" @showFormSetting="showFormSetting" @showPreview="showPreview" />
    </div>
    <div class="fat-form-main-container" :class="{ edit: edit.show }">
      <div class="fat-form-type-panel">
        <TypePanel v-model:data="data" />
      </div>
      <div class="fat-form-drag-panel-container">
        <drag-panel class="drag-panel" :list="data.formItems" />
      </div>

      <div class="fat-form-form-config">
        <FormSetting v-model:show="state.bShowFormSetting" :config="data" />
      </div>
    </div>
  </div>
  <EditPanel v-model="edit.show" :item="edit.item">
  </EditPanel>
  <Preview v-model:show="state.bShowPreview" :config="data" />
</template>

<style lang='scss' scoped>
$topHeight :34px;
$sideWidth :320px;
$mainHeight : calc(100% - $topHeight);

.fat-form-layout-container {
  height: 100%;
  width: 100%;

  .fat-form-toolbar {
    width: 100%;
    height: $topHeight;
  }

  .fat-form-main-container {
    width: 100%;
    height: $mainHeight;
    display: flex;
    overflow: hidden;

    .type-panel {
      transition: width 120ms linear;
      height: 100%;
      width: $sideWidth;
      opacity: 1;
    }

    .fat-form-drag-panel-container {
      flex: 1;
      transition: margin 30ms linear;
      margin-right: 0px;

      .fat-form-drag-panel {
        height: 100%;
      }
    }

    &.edit {
      .fat-form-type-panel {
        width: 0;
        opacity: 0;
      }

      .fat-form-drag-panel-container {
        margin-right: calc($sideWidth + 100px);
      }
    }
  }
}
</style>